<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端文件下载方式汇总</title>

</head>
<body>

<button type="button" style="font-size: 18px" onclick="singleDownload1(1)">气质美女下载(图片)</button>
&nbsp;&nbsp;
<button type="button" style="font-size: 18px" onclick="singleDownload2(2)">凶猛老虎下载(图片)</button>
&nbsp;&nbsp;
<button type="button" style="font-size: 18px" onclick="zipDownload1('1,2')">下载全部(图片)</button>
<br/>
<br/>
<button type="button" style="font-size: 18px" onclick="singleDownload3(3)">演戏连跑步都需要假跑吗(视频)</button>
&nbsp;&nbsp;
<button type="button" style="font-size: 18px" onclick="zipDownload1(4)">美女路边直播,路过家长翻了一个白眼(视频,压缩后下载)</button>
&nbsp;&nbsp;
<button type="button" style="font-size: 18px" onclick="zipDownload2('3,4')">下载全部(视频)</button>
<br/>
<br/>
<button type="button" style="font-size: 18px" onclick="customContentDownload()">下载自定义文本内容</button>


</body>

<script type="text/javascript">

    /**
     * window.open('下载的地址')实现文件下载
     * 1、利用打开新tab方式实现下载
     * 2、如果资源是浏览器无法解析的类型 会关闭tab 触发下载，但如果资源是浏览器可以解析的类型，还是会直接打开预览。
     */
    function singleDownload1(id) {
        window.open("singleDownload1?fileId=" + id);
    }

    function singleDownload2(id) {
        window.open("singleDownload2?fileId=" + id);
    }

    function singleDownload3(id) {
        window.open("singleDownload3?fileId=" + id);
    }

    function customContentDownload() {
        window.open("generateScript");
    }

    function zipDownload1(id) {
        window.open("zipDownload1?fileId=" + id);
    }
    function zipDownload2(id) {
        window.open("zipDownload2?fileId=" + id);
    }
</script>

</html>